<template>
  <div class="dashboard-container">
    <component :is="currentRole" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
import editorDashboard from './editor'
import Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css' // import driver.js css
import steps from '../guide/steps'

export default {
  name: 'Dashboard',
  components: { adminDashboard, editorDashboard },
  data() {
    return {
      currentRole: 'adminDashboard',
      driver: {}
    }
  },
  computed: {
    ...mapGetters([
      'roles',
      'device',
      'guide'
    ])
  },
  created() {
    if (!this.roles.includes('admin')) {
      // this.currentRole = 'editorDashboard'
    }
  },
  mounted() {
    this.$nextTick(_ => {
      // console.log(this.guide, this.device)
      if (this.device !== 'mobile' && Number(this.guide) !== 1) {
        this.driver = new Driver({
          doneBtnText: '完成',
          closeBtnText: '关闭',
          nextBtnText: '下一步',
          prevBtnText: '上一步',
          onReset: _ => {
            this.$store.dispatch('user/setGuide', 1)
          }
        })
        this.driver.defineSteps(steps)
        this.driver.start()
      }
    })
  }
}
</script>
